<!-- 圈子 -->
<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="tabbar" :style="{'height': tabbarHeight,'paddingTop': tabbarTop}">
			<view class="tabbar-img" @click="linkshare">
				<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/hongbao.png" mode="" lazy-load>
				</image>
			</view>
			<view class="bai">

			</view>
		</view>
		<!-- 中心内容区域 -->
		<view class="content"
			:style="{'height': `calc(100vh - 50px - ${tabbarHeight}  - env(safe-area-inset-bottom))`}">
			<view class="search">
				<u-search placeholder="请输入关键字搜索动态" :show-action="false" v-model="keywords" :disabled="false" 
					@change="find()" @confirm="find()"></u-search>
			</view>
			<view class="tabs">
				<view class="tabs-list flex">
					<view class="tabs-item1 flex align-center" :class="active==0?'item1-active':''" @click="active = 0">
						推荐
					</view>
					<view class="tabs-item2 flex justify-center align-center" :class="active==1?'item2-active':''"
						@click="active = 1">
						文章
					</view>
					<view class="tabs-item3 flex justify-center align-center" @click="active = 2">
						<view class="imgs1" v-if="active!=2">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/shudong.png" mode=""
								lazy-load></image>
						</view>
						<view class="imgs2" v-if="active==2">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/shudong-active.png"
								mode="" lazy-load></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 滑块动画 -->
			<view class="sliders">
				<view class="slider flex justify-center align-center"
					:style="{'animation': `${status} 0.3s  ease-in-out 0s 1 alternate forwards`}">
					<view class="icon">

					</view>
				</view>
			</view>
			<!-- 列表区域 -->
			<view class="list"
				:style="{'height': `calc(100vh - 50px - 83rpx - 74rpx - 5rpx - ${tabbarHeight}  - env(safe-area-inset-bottom))`}">
				<swiper class="swiper" @change="swiper" :current="active">
					<swiper-item style="height: 100%;">
						<view class="article">
							<view class="title flex justify-between">
								<SwitchLink name1="最新" name2="最热" :cur="current0" @curren="curren0"></SwitchLink>
							</view>
							<view class="scorll">
								<scroll-view scroll-y="true" @scroll="scroll1" :scroll-top="top1"
									@scrolltolower="scrollToLower1" @scrolltoupper='scrollToUpper1' lower-threshold='30'
									upper-threshold='0'
									:style="{'height': `calc(100vh - 50px - 83rpx - 74rpx - 5rpx - ${titleHeight}px - ${tabbarHeight}  - env(safe-area-inset-bottom))`}">
									<Recommended @attentionShare="attentionShare" @focus="focus" :status="0" :item="item" v-for="item in recommended"></Recommended>
									<loading :load1="load1" :load2="2" :load3="2"></loading>
								</scroll-view>
							</view>
						</view>
					</swiper-item>
					<swiper-item style="height: 100%;">
						<view class="article">
							<view class="title flex justify-between">
								<SwitchLink name1="全部文章" name2="只看精华" :cur="current1" @curren="curren1"></SwitchLink>
								<!-- <view class="right flex justify-center align-center">
									<text>按热度</text>
									<view class="icon">
										<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/classqiehuan.png" mode=""></image>
									</view>
								</view> -->
							</view>
							<view class="scorll">
								<scroll-view scroll-y="true" @scroll="scroll2" :scroll-top="top2"
									@scrolltolower="scrollToLower2" @scrolltoupper='scrollToUpper2' lower-threshold='30'
									upper-threshold='0'
									:style="{'height': `calc(100vh - 50px - 83rpx - 74rpx - 5rpx - ${titleHeight}px - ${tabbarHeight}  - env(safe-area-inset-bottom))`}">
									<Article :item="item" v-for="item in article"></Article>
									<loading :load2="load2" :load1="2" :load3="2"></loading>
								</scroll-view>
							</view>
						</view>
					</swiper-item>
					<swiper-item style="height: 100%;">
						<view class="article">
							<view class="title flex justify-between">
								<SwitchLink name1="最新" name2="最热" :cur="current2" @curren="curren2"></SwitchLink>
							</view>
						</view>
						<view class="scorll">
							<scroll-view scroll-y="true" @scroll="scroll3" :scroll-top="top3"
								@scrolltolower="scrollToLower3" @scrolltoupper='scrollToUpper3' lower-threshold='30'
								upper-threshold='0'
								:style="{'height': `calc(100vh - 50px - 83rpx - 74rpx - 5rpx - ${titleHeight}px - ${tabbarHeight}  - env(safe-area-inset-bottom))`}">
								<TreeHole :item="item" v-for="item in treeHole" :status="0"></TreeHole>
								<loading :load3="load3" :load1="2" :load2="2"></loading>
							</scroll-view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="opera">
			<view class="use">
				<view class="ero" @click="refresh">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/shuaxin.png" mode=""></image>
				</view>
				<view class="ore" @click="release">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/xinz.png" mode=""></image>
				</view>
			</view>
		</view>
		<view v-if="show" class="release" @click.stop="cancels">
			<view class="cards flex justify-center align-center flex-column" @click.stop>
				<view class="item flex justify-between align-center">
					<view class="icon flex justify-center align-center flex-column" @click="linkre(0)">
						<view class="img">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/dongtai.png" mode="">
							</image>
						</view>
						<view class="name">
							写动态
						</view>
					</view>
					<view class="icon flex justify-center align-center flex-column" @click="linkre(1)">
						<view class="img">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/wenzhang.png" mode="">
							</image>
						</view>
						<view class="name">
							发文章
						</view>
					</view>
					<view class="icon flex justify-center align-center flex-column" @click="linkre(2)">
						<view class="img">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/shudongs.png" mode="">
							</image>
						</view>
						<view class="name">
							发树洞
						</view>
					</view>
				</view>
				<view class="botton" @click="cancels">
					取消
				</view>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<u-tabbar :list="tabbar" :border-top="false" :before-switch="click" inactive-color="#666666"
			active-color="#333333"></u-tabbar>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import SwitchLink from '@/components/switch/switch.vue'
	import Article from '@/components/article/article.vue'
	import Recommended from '@/components/recommended/recommended.vue'
	import TreeHole from '@/components/treeHole/treeHole.vue'
	import Loading from '@/components/loading/loading.vue'
	export default {
		components: {
			SwitchLink,
			Article,
			Recommended,
			TreeHole,
			Loading
		},
		data() {
			return {
				tabbar: this.$store.state.list, //tabbar数据
				tabbarTop: 0,
				tabbarHeight: 0,
				titleHeight: 0,
				background: {
					background: 'linear-gradient(135deg, #1C79F8, #0265EB)' //顶部导航背景色
				},
				show: false,
				top1: 0,
				top2: 0,
				top3: 0,
				load1: 2,
				load2: 2,
				load3: 2,
				old1: {
					scrollTop: 0
				},
				old2: {
					scrollTop: 0
				},
				old3: {
					scrollTop: 0
				},
				search: '',
				active: 0,
				status: '',
				current0: 0,
				current1: 0,
				current2: 0,
				article: [],
				keywords: '',
				recommended: [],
				treeHole: [],
				openID: null,
				attentionQurey: {
					pageNum: 1,
					pageSize: 5,
					type: 0,
					state:0,
					keywords: ''
				},
				articleQurey: {
					pageNum: 1,
					pageSize: 5,
					type: 0,
					keywords: ''
				},
				treeHoleQurey: {
					pageNum: 1,
					pageSize: 5,
					type: 0,
					keywords: ''
				},
				recommendeds:[],
				shareId:''
			}
		},
		onLoad() {
			uni.showLoading()
			//指定监听的变量变化后传入对应的函数中
			console.log('页面')
			getApp().watch(this.getInit, 'status')
			this.init()
		},
		onShareAppMessage(res){
			 if (res.from === 'button') {// 来自页面内分享按钮
			      // let qurey={}
			      // qurey.attentionListId = this.shareId
			      // console.log(qurey)
			      // this.$post('/attentionList/attentionShareRecords',qurey)
				  setTimeout(this.share,500)
			    }
			return {
			      title: '我正在用山富职得找工作，快来和我一起吧！',
			      path: '/pages/circle/circle',
			    }
		
		},
		onShow() {
			if (uni.getStorageSync('fresh')) {
				this.articleQurey.pageNum = 1
				this.article = []
				this.attentionQurey.pageNum = 1
				this.recommended = []
				this.treeHoleQurey.pageNum = 1
				this.treeHole = []
				this.init()
			}
			if (uni.getStorageSync('likeId0') >= 0) {
				let qurey = {
					pageNum: 1,
					pageSize: 5,
					type: this.attentionQurey.type,
					keywords: this.attentionQurey.keywords
				}
				this.recommended.forEach((item, index)=>{
					if (item.attentionListId == uni.getStorageSync('likeId0')) {
						let n = index + 1
						if (n % 5 != 0) {
							qurey.pageNum = parseInt(n / 5 + 1)
						} else {
							qurey.pageNum = parseInt(n / 5)
						}
						this.$get('/attentionList/page', qurey).then((res) => {
							if (res.code == 200) {
								let list = this.recommended
								list.splice(index, 1, res.data.records[index % 5])
								this.recommended = list
							}
						})
					}
				})
			}
			if (uni.getStorageSync('shareId') >= 0) {
				let qurey = {
					pageNum: 1,
					pageSize: 5,
					type: this.attentionQurey.type,
					keywords: this.attentionQurey.keywords
				}
				this.recommended.forEach((item, index)=>{
					if (item.attentionListId == uni.getStorageSync('shareId')) {
						let n = index + 1
						if (n % 5 != 0) {
							qurey.pageNum = parseInt(n / 5 + 1)
						} else {
							qurey.pageNum = parseInt(n / 5)
						}
						this.$get('/attentionList/page', qurey).then((res) => {
							if (res.code == 200) {
								let list = this.recommended
								list.splice(index, 1, res.data.records[index % 5])
								this.recommended = list
							}
						})
					}
				})
			}
			if (uni.getStorageSync('likeId1') >= 0) {
				let qurey = {
					pageNum: 1,
					pageSize: 5,
					type: this.articleQurey.type,
					keywords: this.articleQurey.keywords
				}
				this.article.forEach((item, index)=>{
					if (item.articleListId == uni.getStorageSync('likeId1')) {
						let n = index + 1
						if (n % 5 != 0) {
							qurey.pageNum = parseInt(n / 5 + 1)
						} else {
							qurey.pageNum = parseInt(n / 5)
						}
						this.$get('/articleList/page', qurey).then((res) => {
							if (res.code == 200) {
								let list = this.article
								list.splice(index, 1, res.data.records[index % 5])
								this.article = list
								console.log(this.article)
							}
						})
					}
				})
			}
			if (uni.getStorageSync('likeId2') >= 0) {
				let qurey = {
					pageNum: 1,
					pageSize: 5,
					type: this.treeHoleQurey.type,
					keywords: this.treeHoleQurey.keywords
				}
				this.treeHole.forEach((item, index)=>{
					if (item.hollowListId == uni.getStorageSync('likeId2')) {
						let n = index + 1
						if (n % 5 != 0) {
							qurey.pageNum = parseInt(n / 5 + 1)
						} else {
							qurey.pageNum = parseInt(n / 5)
						}
						this.$get('/hollowList/page', qurey).then((res) => {
							if (res.code == 200) {
								let list = this.treeHole
								list.splice(index, 1, res.data.records[index % 5])
								this.treeHole = list
								console.log(this.treeHole)
							}
						})
					}
				})
			}
			// this.$forceUpdate()
			console.log(this.recommended)
		},
		
		
			onHide() {
					uni.setStorageSync('fresh', false)
				},
				methods: {
					//初始化
					init() {
						this._setTabbarTitleHeight()
						this._getTitleHeight()
						this.getList()
						this.getarticle()
						this.gettree()
					},
					getInit(val){
						console.log('输出变化的值',val)
						let time = null
						if(val) {
							time = setTimeout(()=>{
								//初始化函数, 静默授权后的具体操作
								this.$get('/user/UserInfo').then((res)=>{
									if(res.code == 200){
										let info = res.data
										uni.setStorageSync('anonymousAvatar', info.anonymousAvatar)
										uni.setStorageSync('company', info.company)
										uni.setStorageSync('flowerName', info.flowerName)
										uni.setStorageSync('userId', info.userId)
										uni.setStorageSync('position', info.position)
										uni.setStorageSync('userId', info.userId)
									}
								})
								
								this.$get('/userResumeFile/list').then((res)=>{
									if(res.code == 200){
										let jianli = res.data
										if (jianli) {
									uni.setStorageSync('jianli', true)
								}
									}
								})
								uni.hideLoading()
								clearTimeout(time) //销毁定时器
							},500)
						}else{
							uni.hideLoading()
						}
					},
					attentionShare(e){
						this.shareId = e
						console.log(this.shareId)
					},
					async share(){
						let qurey={}
						qurey.attentionListId = this.shareId
						console.log(qurey)
						await this.$post('/attentionList/attentionShareRecords',qurey)
						
					},
					//上拉加载
					scrollToLower1() {
						if (this.load1 != 1) {
							this.attentionQurey.pageNum += 1
							this.getList()
						}

					},
					scrollToLower2() {
						if (this.load2 != 1) {
							this.articleQurey.pageNum += 1
							this.getarticle()
						}
					},
					scrollToLower3() {
						if (this.load3 != 1) {
							this.treeHoleQurey.pageNum += 1
							this.gettree()
						}
					},
					//下拉刷新
					scrollToUpper1(e) {
						console.info("scrollToUpper1", e)
					},
					scrollToUpper2(e) {
						console.info("scrollToUpper2", e)
					},
					//点赞关注
					// zan(e){
					// 	let qurey={
					// 		pageNum:1,
					// 		pageSize: 5,
					// 		type: this.attentionQurey.type,
					// 		keywords:this.attentionQurey.keywords
					// 	}
					// 	this.recommended.forEach((item,index)=>{
					// 		if(item.attentionListId == e.attentionListId){
					// 			let n = index+1
					// 			if(n%5!=0){
					// 				qurey.pageNum = parseInt(n/5+1)
					// 			}else{
					// 				qurey.pageNum = parseInt(n/5) 
					// 			}
					// 			this.$get('/attentionList/page',qurey).then((res)=>{
					// 				if(res.code == 200){
					// 					this.recommended.splice(index,1,res.data.records[index%5])
					// 					console.log(this.recommended)
					// 				}
					// 			})

					// 		}
					// 	})
					// },
					// zan1(e){
					// 	let qurey={
					// 		pageNum:1,
					// 		pageSize: 5,
					// 		type: this.articleQurey.type,
					// 		keywords:this.articleQurey.keywords
					// 	}
					// 	this.article.forEach((item,index)=>{
					// 		if(item.articleListId == e.articleListId){
					// 			let n = index+1
					// 			if(n%5!=0){
					// 				qurey.pageNum = parseInt(n/5+1)
					// 			}else{
					// 				qurey.pageNum = parseInt(n/5) 
					// 			}
					// 			this.$get('/articleList/page',qurey).then((res)=>{
					// 				if(res.code == 200){
					// 					this.article.splice(index,1,res.data.records[index%5])
					// 					console.log(this.recommended)
					// 				}
					// 			})

					// 		}
					// 	})
					// },
					//设置title高度
					_setTabbarTitleHeight() {
						let top = uni.getStorageSync('tabbarCapsule')
						this.tabbarTop = top.top + 'px'
						this.tabbarHeight = top.bottom + 20 + 'px'
					},
					//获取切换按钮高度
					_getTitleHeight() {
						uni.createSelectorQuery().select('.title').boundingClientRect(item => {
							this.titleHeight = item.height
						}).exec()
					},
					//刷新按钮
					refresh() {
						this.articleQurey.pageNum = 1
						this.article = []
						this.attentionQurey.pageNum = 1
						this.recommended = []
						this.treeHoleQurey.pageNum = 1
						this.treeHole = []
						this.getList()
						this.getarticle()
						this.gettree()
					},
					scroll1(e) {
						this.old1.scrollTop = e.detail.scrollTop
					},
					scroll2(e) {
						this.old2.scrollTop = e.detail.scrollTop
					},
					scroll3(e) {
						this.old3.scrollTop = e.detail.scrollTop
					},
					//返回顶部
					backTop1() {
						this.top1 = this.old1.scrollTop
						this.$nextTick(() => {
							this.top1 = 0
						});
					},
					backTop2() {
						this.top2 = this.old2.scrollTop
						this.$nextTick(() => {
							this.top2 = 0
						});
					},
					backTop3() {
						this.top3 = this.old3.scrollTop
						this.$nextTick(() => {
							this.top3 = 0
						});
					},
					//模糊搜索按钮
					find() {
						this.articleQurey.keywords = this.keywords
						this.articleQurey.pageNum = 1
						this.article = []
						this.attentionQurey.keywords = this.keywords
						this.attentionQurey.pageNum = 1
						this.recommended = []
						this.treeHoleQurey.keywords = this.keywords
						this.treeHoleQurey.pageNum = 1
						this.treeHole = []
						this.getList()
						this.getarticle()
						this.gettree()
					},
					//发布按钮
					release() {
						// this.openID = uni.getStorageSync('openId')
						// if(this.openID){
						// 	this.show = true
						// }else{
						// 	uni.navigateTo({
						// 		url: '/pages/login/login'
						// 	})
						// }
						if (this.$login()) {
							this.show = true
						} else {
							uni.navigateTo({
								url: '../login/login'
							})
						}

					},
					//刷新页面数据
					fresh() {
						if (getCurrentPages().length != 0) {
							getCurrentPages()[getCurrentPages().length - 1].onLoad()
						}
					},
					focus(id) {
						this.recommended.forEach((item,index)=>{
							if(item.userId == id){
								this.recommended[index].attentionType = !this.recommended[index].attentionType
								console.log(this.recommended[index].attentionType)
							}
						})
					},
					// 取消发布
					cancels() {
						this.show = false
					},
					//前往发布页面
					async linkre(id) {
						let {
							data: open
						} = await this.$get('/user/userAuthenticationType')

						switch (id) {

							case 0:
								if (1) { //open.realNameType
									uni.navigateTo({
										url: '/pagesA/release/release?id=' + id
									})
								} else {
									this.showToast()
								}
								break;
							case 1:
								if (1) { //open.realNameType
									uni.navigateTo({
										url: '/pagesA/release/releaseArticle?id=' + id
									})
								} else {
									this.showToast()
								}
								break;
							case 2:
								uni.navigateTo({
									url: '/pagesA/release/releaseTreeHole?id=' + id
								})
								break;
						}

						this.show = false
					},
					showToast() {
						this.$refs.uToast.show({
							title: '请先完成实名认证',
							type: 'error',
						})
					},
					// 跳转分享页面
					linkshare() {
						if(this.$login()){
							uni.navigateTo({
							url: '/pagesA/share/share'
						})
						}else{
							uni.navigateTo({
								url: '../login/login'
							})
						}
						
					},
					//切换最新与精华
					async curren0(id) {
						this.recommended = []
						this.attentionQurey.pageNum = 0
						this.current0 = id
						this.attentionQurey.type = id
						this.getList()

					},
					async curren1(id) {
						this.article = []
						this.articleQurey.pageNum = 0
						this.current1 = id
						this.articleQurey.type = id
						this.getarticle()
					},
					//切换树洞最新最热
					async curren2(id) {
						this.treeHole = []
						this.treeHoleQurey.pageNum = 0
						this.current2 = id
						this.treeHoleQurey.type = id
						this.gettree()

					},
					//滑动事件
					swiper(e) {
						this.active = e.detail.current
					},
					//tabbar切换前的回调
					click(e) {
						return true
					},
					//请求数据
					async getList() {
						//请求推荐
						let {
							data: attention,
							code
						} = await this.$get('/attentionList/page', this.attentionQurey)
						if (code == 200) {
							if (attention.records.length != 0) {
								this.load1 = 0
							} else {
								this.load1 = 1
							}
							this.recommended = this.recommended.concat(attention.records)
						}
					},
					async getarticle() {
						//请求文章
						let {
							data: article,
							code
						} = await this.$get('/articleList/page', this.articleQurey)
						if (code == 200) {
							if (article.records.length != 0) {
								this.load2 = 0
							} else {
								this.load2 = 1
							}
							this.article = this.article.concat(article.records)
						}

					},
					async gettree() {
						//请求树洞
						let {
							data: treeHole,
							code
						} = await this.$get('/hollowList/page', this.treeHoleQurey)
						if (code == 200) {
							if (treeHole.records.length != 0) {
								this.load3 = 0
							} else {
								this.load3 = 1
							}
							this.treeHole = this.treeHole.concat(treeHole.records)
						}
						console.log(this.treeHole)
					},

				},
				watch: {
					active(news, old) {
						if (news == 1 && old == 0) {
							this.status = 'mobile1'
						} else if (news == 2 && old == 1) {
							this.status = 'mobile2'
						} else if (news == 2 && old == 0) {
							this.status = 'mobile3'
						} else if (news == 1 && old == 2) {
							this.status = 'mobile4'
						} else if (news == 0 && old == 1) {
							this.status = 'mobile5'
						} else if (news == 0 && old == 2) {
							this.status = 'mobile6'
						}
					}

				},
				//请求数据

		}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		//padding-bottom: env(safe-area-inset-bottom);
		position: relative;

		.tabbar {
			// height: 80px;
			background: linear-gradient(135deg, #1C79F8, #0265EB);
			position: relative;

			.tabbar-img {
				width: 66rpx;
				height: 66rpx;
				margin-left: 30rpx;
			}

			.bai {
				height: 20rpx;
				width: 100%;
				background-color: #ffffff;
				border-top-left-radius: 24rpx;
				border-top-right-radius: 24rpx;
				position: absolute;
				bottom: 0;
			}
		}

		.content {
			background-color: #ffffff;

			.search {
				width: 100%;
				padding: 10rpx 30rpx 0;

			}

			.tabs {
				.tabs-list {
					.tabs-item1 {
						color: #666666;
						font-size: 28rpx;
						margin: 30rpx 30rpx 20rpx;
						line-height: 0;
						width: 60rpx;
						height: 33rpx;
					}

					.item1-active {
						font-weight: bold;
						color: #333333;
						font-size: 36rpx;
						line-height: 0;
						width: 77rpx;
						height: 33rpx;
					}

					.tabs-item2 {
						color: #666666;
						font-size: 28rpx;
						margin: 30rpx 30rpx 20rpx;
						line-height: 0;
						width: 60rpx;
						height: 33rpx;
					}

					.item2-active {
						font-weight: bold;
						color: #333333;
						font-size: 36rpx;
						line-height: 0;
						width: 77rpx;
						height: 33rpx;
					}

					.tabs-item3 {
						margin: 30rpx 30rpx 20rpx;
						width: 77rpx;

						.imgs1 {
							width: 63rpx;
							height: 27rpx;
							opacity: 0.4;
							line-height: 0;
						}

						.imgs2 {
							width: 77rpx;
							height: 33rpx;
							line-height: 0;
						}
					}
				}
			}

			.sliders {
				padding-left: 30rpx;

				.slider {
					width: 77rpx;

					.icon {
						width: 40rpx;
						height: 5rpx;
						background: #0265EB;
						border-radius: 3rpx;
					}
				}

				@keyframes mobile1 {
					0% {
						margin-left: 0rpx;
					}

					100% {
						margin-left: 120rpx;
					}
				}

				@keyframes mobile2 {
					0% {
						margin-left: 120rpx;
					}

					100% {
						margin-left: 240rpx;
					}
				}

				@keyframes mobile3 {
					0% {
						margin-left: 0rpx;
					}

					100% {
						margin-left: 240rpx;
					}
				}

				@keyframes mobile4 {
					0% {
						margin-left: 240rpx;
					}

					100% {
						margin-left: 120rpx;
					}
				}

				@keyframes mobile5 {
					0% {
						margin-left: 120rpx;
					}

					100% {
						margin-left: 0rpx;
					}
				}

				@keyframes mobile6 {
					0% {
						margin-left: 240rpx;
					}

					100% {
						margin-left: 0rpx;
					}
				}
			}

			.list {
				.swiper {
					height: 100%;

					.article {
						.title {
							.right {
								text {
									font-weight: 500;
									color: #333333;
									font-size: 24rpx;
								}

								.icon {
									width: 31rpx;
									height: 23rpx;
								}
							}
						}

						.scorll {}
					}
				}
			}
		}

		.opera {
			position: fixed;
			bottom: calc(100rpx + 50px + env(safe-area-inset-bottom));
			right: 30rpx;

			.use {
				.ero {
					width: 118rpx;
					height: 118rpx;
					margin-bottom: 40rpx;
				}

				.ore {
					width: 118rpx;
					height: 118rpx;
				}
			}
		}

		.release {
			background: rgba(0, 0, 0, 0.4);
			height: 100vh;
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1000;

			.cards {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 750rpx;
				height: 420rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0px 0px;
				padding: 100rpx 0 calc(34rpx + env(safe-area-inset-bottom));

				.botton {
					margin-top: 58rpx;
					font-weight: 500;
					color: #333333;
					font-size: 36rpx;
					line-height: 1;
				}

				.item {
					width: 100%;

					.icon {
						width: 33.33%;

						.img {
							width: 102rpx;
							height: 102rpx;
							margin-bottom: 20rpx;
						}

						.name {
							font-weight: 500;
							color: #333333;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>
